<template>
  <div class="keyboard" v-if="showkeyboard">
    <div class="show">
      <span>{{ num }}</span>
      <img src="@/assets/remove.png" alt="" @click="$emit('splice')" />
    </div>
    <div class="keys">
      <div
        v-for="(item, index) in keywords"
        :key="index"
        class="key"
        @click="handleClick(item)"
      >
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    showkeyboard: {
      type: Boolean,
      default: false,
    },
    num: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      keywords: [1, 2, 3, 4, 5, 6, 7, 8, 9, "取消", 0, "确定"],
    };
  },
  methods: {
    handleClick(item) {
      this.$emit("clickKey", item);
    },
  },
};
</script>

<style scoped lang="scss">
.keyboard {
  width: 100vw;
  background-color: #fff;
  z-index: 99999999;
  position: fixed;
  bottom: 0;
  left: 0;
  .keys {
    display: flex;
    flex-wrap: wrap;
    .key:active {
      background-color: #f5f5f5;
    }
    .key {
      width: calc(100% / 3);
      border: 1px solid #ccc;
      height: calc(100vw / 3 / 2);
      font-size: 4.8vw;
      text-align: center;
      line-height: calc(100vw / 3 / 2);
    }
  }
  .show {
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
    font-size: 3.733vw;
    img {
      width: 4vw;
      height: 4vw;
    }
  }
}
</style>